<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建拉群</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/fission/css/iconfont.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		.newcreatGroup_otherTips_container{
			color: #999;
			font-size: 14px;
			padding-top: 10px;
		}
		.table-stop{
			text-align: center;
			cursor: pointer;
			color: #2196f3;
			margin-top: 10px;
		}
		.table-input{
			height: 38px;
			line-height: 1.3;
			border-width: 1px;
			border-style: solid;
			background-color: #fff;
			border-radius: 2px;
			border-color: #e6e6e6;
			padding-left: 10px;
			margin: 10px;
			width: 70px;
		}
		.service-card {
		  padding: 0 7px;
		  color: rgba(0,0,0,.65);
		  line-height: 28px;
		  font-size: 13px;
		  display: inline-block;
		  margin: 0 8px 0 5px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background: #fafafa;
		  border: 1px solid #e9e9e9;
		  border-radius: 4px;
		  position: relative;
		}
		.service-card i {
		  font-size: 14px;
		  display: inline-block;
		  color: #7da3d1;
		  margin-right: 2px;
		}
		.service-card .close {
		  position: absolute;
		  top: -13px;
		  right: -8px;
		  opacity: .6;
		  cursor: pointer;
		}
		.service-card .close:hover {
		  opacity: 1;
		}
	</style>
</head>
<body>

	<form class="layui-form" id="form1">
		

		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建拉群</p>
					<a href="javascript:history.back(-1)">
						<svg t="1599462684269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8055" width="20" height="20"><path d="M501.2992 273.408l1.024-156.16L184.65792 379.904l314.29632 266.1376 0.95232-149.2992c313.86624 42.5984 178.29888 231.3216-0.5632 410.2144 619.5712-404.3776 251.01312-590.6432 1.95584-633.5488z" p-id="8056"></path></svg>
					</a>
				</div>

			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">群码名称：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<input type="text" name="name" value="{$contactWay->name}" required  lay-verify="required" placeholder="请输入群码名称" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">添加验证：</lable>
						</div>
						<div class="public_formOther_container" >
							<div class="layui-input-block" id="selectTime_container">
								<input type="radio" lay-filter="selectTime" name="skip_verify" value="1" title="直接通过" {if $contactWay->skip_verify == 1} checked {/if}>
								<input type="radio" lay-filter="selectTime" name="skip_verify" value="0" title="需验证" {if $contactWay->skip_verify == 0} checked {/if}>
							</div>
						</div>
						<div class="layui-input-block newcreatGroup_otherTips_container">
							<p>（客户添加时无需企业成员确认，自动成为好友）</p>
						</div>
					</div>
				</div>
				
				<div class="public_form_content">
					
					<div class="public_form_List shareuser">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">使用成员：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addPeople">+ 选择成员</span>
							</div>
						</div>
					</div>
					<input type="hidden" name="checkUser" value="{implode(',',json_decode($contactWay->users,1))}" id="checkUser"/>
					<div id="checkUserCon" style="padding: 6px 5px 0px 105px;">
						{loop json_decode($contactWay->users,1) as $userid}
							<div class="service-card">
							<i class="iconfont icon-person"></i>{$h->get_user_by_id($contactWay->wid,$userid)['name']}
							</div>
						{/loop}
					</div>
				</div>
				
				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">自动打标签：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="autoLable">
							  <input type="checkbox" lay-filter="autoLable" name="auto_label" lay-skin="switch" {if $contactWay->auto_label} checked {/if}>
							</div>
						</div>
					</div>
					<div class="public_form_List" id="autoLableContainer" {if !$contactWay->auto_label} style="display: none;" {/if}>
						<div class="public_formTitle_container">
							<lable class="layui-form-label">选择标签：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addLable">+ 添加标签</span>
							</div>
						</div>
						<input type="hidden" name="checkLable" value="{implode(',',json_decode($contactWay->select_label,1))}" id="checkLable"/>
						<div id="checkLableCon" style="padding: 6px 5px 0px 105px;">
							{loop json_decode($contactWay->select_label,1) as $lable}
								<!--{explode("_", $lable)[1]}-->
								<div class="service-card">
								{$h->get_et_tags($contactWay->wid)[$lable]}
								</div>
							{/loop}
						</div>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">入群引导语：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
							  <textarea name="text_content" value="" id="text_content" lay-verify="required" placeholder="请输入内容" class="layui-textarea">{$contactWay->text_content?$contactWay->text_content:"例：您好，我是XXX客服！扫码下方二维码进群交流~ 如有问题，可随时咨询"}</textarea>
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="public_form_content">
					
					<div class="public_form_List shareuser">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">添加群聊：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<span class="layui-btn layui-btn-primary" id="addGroup">+ 请选择群聊</span>
							</div>
							<div class="layui-input-block newcreatGroup_otherTips_container">
								<p>可添加多个群聊，当前面的群人数达到上限后，自动发送后面的群二维码。即当第一个群达到人数上限，客户自动扫码会添加第二个客服，然后进入第二个群聊，依次往后进行。因系统无法判断群二维码是否真实有效，请您准确上传群对应的群二维码，否则会影响拉群效果。</p>
							</div>
							<div class="layui-input-block">
								<table class="layui-table" >
								  <colgroup>
								      <col>
								      <col>
								      <col  width="130">
								      <col>
								    </colgroup>
								    <thead>
								      <tr>
								      	<th>群名称</th>
								      	<th>群人数上限</th>
								        <th>二维码</th>
								        <th>操作</th>
								      </tr> 
								    </thead>
								    <tbody id="groupChatCon">
									{loop $group_chat_list as $group_chat}
										<tr class="groupItems">
										<input type="hidden" name="item.id[]" value="{$group_chat['id']}">
										<input type="hidden" name="item.chatid[]" value="{$group_chat['chatid']}">
										<input type="hidden" name="item.name[]" value="{$group_chat['name']}">
										<td>{$group_chat['name']}</td>
										<td>群人数达到<input type="text" onchange="checkNum(this)" name="item.people[]" value="{$group_chat['people']}" class="table-input">人,换群加入</td>
										<input type="hidden" id="img_{$group_chat['id']}" name="item.img[]" value="{$group_chat['img']}" lay-verify="required">
										<td><img style="width: 100px;height: 100px;background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/85cfe07f51113409beda59cee60c8be8.jpg)" src="{$group_chat['img']}" id="pic_{$group_chat['id']}" onclick="select_img({$group_chat['id']})"></td>
										<td><button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delitem(this)">删除</button></td>
										</tr>
									{/loop}
								      <!--<tr>
								        <td>名称</td>
								        <td>群人数达到<input type="text" value="200" class="table-input">人,换群加入</td>
								        <td><img style="width: 100px;height: 100px;" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg">
										<p class="table-stop">停用</p>
								        </td>
								        <td><button type="button" class="layui-btn layui-btn-sm layui-btn-danger">删除</button></td>
								      </tr>-->
								    </tbody>
								</table>
							</div>
						</div>
					</div>

				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<a class="layui-btn" lay-submit lay-filter="formDemo">立即提交</a>
						<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
					</div>
				</div>
			</div>
			<!-- 公共表单部分 end-->
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		
		// 弹窗
		layui.use('layer', function(){
		  var layer = layui.layer;
		}); 
		// 表单
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    //layer.msg(JSON.stringify(data.field));
		    //return false;
			var formData = $('#form1').serialize();	
			myAjaxPost(false, true, '', formData, function (resp) {
				if (resp.status == 'success') {
					tusi(resp.msg);
					setTimeout(function(){
						location.href = 'auto_pull_group.html'; 
					},2000);
				}else{
					alert(resp.msg);
				}
			});
		  });

		  // 自动标签
		  form.on('switch(autoLable)', function(data){
		      console.log(data.elem.checked); //是否被选中，true或者false
		      if(data.elem.checked == true){
		      	$("#autoLableContainer").show();
		      }else{
		      	$("#autoLableContainer").hide();
		      }
		      form.render();
		  });
		});
		
	</script>
	<script type="text/javascript">
		$('#addPeople').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择使用人员',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_user-{$contactWay->id}.html'
			}); 
		})
		$('#addLable').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择标签',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_tag.html'
			}); 
		})
		$('#addGroup').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择群聊',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '530px'],
			  content: 'select_group_chat.html'
			}); 
		})
	</script>
	
	<script>
	layui.use(['element', 'layer', 'upload'], function () {
	  var layer = layui.layer;
	});
	function select_img(id){
		var targetId=id;
		layer.open({
			title:'图片库',
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: false,
			content: '/imgLib/lib.html?type=vshop_img&target='+targetId
		});
	}

	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  var prevEle=$('#pic_'+tgt);
	  var inputEle=$('#img_'+tgt);
	  inputEle.val(url);
	  prevEle.attr('src',url);
	  prevEle.show();
	};
	
	function checkNum(a){
		var val = a.value;
		if (val=='') { 
　　　　　　a.value = 500;
　　　　}else if(!(/(^[1-9]\d*$)/.test(val))){
			a.value = 500;
		}else if(val > 500){
			a.value = 500;
		}
	}
	function delitem(a){
		$(a).parents('tr.groupItems').remove();
	}
	</script>
</body>
</html>